<template>
  <view class="model flex margin-bottom-10">
    <view class="flex" style="line-height: 180rpx;">
      <text v-if="showCheck" class="iconfont icon-gouxuan check" :class="item.isCheck ? 'color-ffe' : ''"
        @click="handleCheck(item.id)"></text>
      <image :src="item.img" mode="heightFix"></image>
    </view>
    <view class="modelRight">
      <view class="flex justify-between margin-bottom-10">
        <view class="text-left">
          <view class="bold" v-if="item.name">{{ item.name }}</view>
          <view>
            <text class="french">{{ item.french }}</text>
          </view>
        </view>
        <text v-if="showEdit" class="iconfont icon-bianji edit f12" @click="handleEdit(cartIndex)"></text>
      </view>
      <view class="flex justify-between">
        <text class="text-bold">￥{{ item.list[item.idx].price }}</text>
        <text>{{ item.list[item.idx].spec }}({{item.list[item.idx].weight}}克) × {{ item.goods_count }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
  } from 'vuex'
  export default {
    name: "cart-item",
    data() {
      return {

      };
    },
    props:{
      item:{
        default:{},
        type:Object
      },
      cartIndex:{
        default:0,
        type:Number
      },
      showCheck:{
        default:true,
        type:Boolean
      },
      showEdit:{
        default:true,
        type:Boolean
      },
    },
    methods: {
      ...mapMutations({
        handleCheck: 'cart/cartCheckMut',
      }),
      handleEdit(index) { // 弹窗
        // this.dropNum = this.cartList[idx].goods_count
        this.$store.commit('cart/changeShow', true)
        this.$store.commit('cart/changeCartIndex', index)
        this.$store.commit('cart/changeDropIdx', this.$store.state.cart.cartList[index].idx)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .model {
  	padding: 10rpx;
  	margin: 0 20rpx 20rpx 20rpx;
  	height: 180rpx;
  	border: 1px solid #ededed;
  	border-radius: 15rpx;
    
  
  	view {
  		background-color: white;
  	}
    
    .check{
      margin-right: 30rpx;
    }
  
  	image {
  		height: 180rpx;
  	}
  
  	.modelRight {
  		width: 100%;
  		padding-left: 50rpx;
  
  		.edit {
  			width: 60rpx;
  			height: 60rpx;
  			text-align: center;
  			line-height: 60rpx;
  			border-radius: 50%;
  			background-color: #e6e6e6;
  		}
  	}
  }
</style>
